import 'package:flutter/material.dart';
import 'package:flutter_hx/theme/font_size.dart';
import 'package:flutter_hx/widgets/ez_image.dart';
import 'package:get/get.dart';

class CheckInCalender extends StatefulWidget {
  const CheckInCalender({Key? key, required this.checkedList})
      : super(key: key);
  ///传入已签到日期
  final List<int> checkedList;

  @override
  State<CheckInCalender> createState() => _CheckInCalenderState();
}

class _CheckInCalenderState extends State<CheckInCalender> {
  late DateTime currentDate;
  late int daysInMonth;
  late DateTime firstDate;
  late int weekDayOfFirstDate;
  late int selectedDay;
  late List<List<int>> lists;

  @override
  void initState() {
    currentDate = DateTime.now();
    ///取当前月的天数
    daysInMonth = DateUtils.getDaysInMonth(currentDate.year, currentDate.month);
    ///标记第一天
    firstDate = DateTime(currentDate.year, currentDate.month, 1);
    ///取第一天的星期
    weekDayOfFirstDate = firstDate.weekday;
    ///初始化选中的日期
    selectedDay = currentDate.day;
    List<int> days = [];
    ///列表的第一天如果不是正好星期日，则在头部补充第一天之前的方块，（日期为0，判断隐藏）
    if (weekDayOfFirstDate != 7) {
      for (int i = 0; i < weekDayOfFirstDate; i++) {
        days.add(0);
      }
    }
    ///将本月所有天插入数组
    for (int i = 0; i < daysInMonth; i++) {
      days.add(i + 1);
    }
    lists = [];
    ///将上面填充空日期后的数组，以7天为单位，分为若干数组
    for (int i = 0; i < (days.length / 7).ceil(); i++) {
      lists.add(days.sublist(
          i * 7, ((i + 1) * 7) <= days.length ? ((i + 1) * 7) : null));
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ///将分好的以7天为单位的数组，再次分为不同行
        ..._daysRows(lists, currentDate.day, (day) {
          ///选中某天后刷新页面
          setState(() {
            selectedDay = day;
          });
        })
      ],
    );
  }

  List<Row> _daysRows(
      List<List<int>> lists, int currentDay, Function(int)? onTap) {
    ///将7天数组分为多行
    return lists.map<Row>((days) {
      return Row(
        children: [
          ...days.map<Widget>((day) {
            return _dayWidget(

                ///日期数字
                day: day,

                ///是否已经签到
                checked: widget.checkedList.contains(day),

                ///是否是选中天
                currentDay: day == selectedDay,

                ///是否在今天之前，用于显示灰色文字
                beforeCurrent: day < currentDay,

                ///点击切换选中天
                onTap: onTap);
          }).toList()
        ],
      );
    }).toList();
  }

  Widget _dayWidget(
      {required int day,
      required bool checked,
      required bool currentDay,
      required bool beforeCurrent,
      Function(int)? onTap}) {
    ///判断是否是头部填充的方格，是则填充SizedBox，不是则正常显示
    return day != 0
        ? InkWell(
            onTap: () => onTap?.call(day),
            child: Container(
              width: Get.width / 7,
              height: 64,
              alignment: Alignment.center,
              child: currentDay

                  ///如果是当前选择的一天则显示贝壳
                  ? const EzImage.asset(
                      "check_in_selected_date.png",
                      height: 41,
                      width: 41,
                    )
                  : checked

                      ///如果不是当前选择的一天，但是为已签到的一天，则显示签到图标
                      ? const EzImage.asset(
                          "check_in_checked_date.png",
                          height: 27,
                          width: 27,
                        )

                      ///都不是，则显示日期
                      : Text(
                          "$day",
                          style: TextStyle(
                              color: beforeCurrent
                                  ? const Color(0xFFC8C9CC)
                                  : const Color(0xFF323233),
                              fontSize: FontSize.pt16),
                        ),
            ),
          )
        : SizedBox(
            width: Get.width / 7,
          );
  }
}
